<!--
	作者：344805262@qq.com
	时间：2015-11-12
	描述：购物车
-->
<!doctype html>
<html>

  <head>
    <meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta charset="utf-8">
    <title>购物车</title>
    <link href="../../css/css.css?v=185" rel="stylesheet" type="text/css">
  </head>

  <body>
    <!----------------头部定位---------------------------->
    <div class="header">
      <span class="headleft">
	    	<!--<span id="back" class="back"><i class="iconfont icon-jiantou"></i></span>-->
      </span>
      <span class="tbbiaoti">购物车</span>
      <span id="editCart" class="headright">
	    		<span class="xiaox fhtb header-bianji">编辑</span>
      </span>
    </div>
    <!----------------内容开始---------------------------->
    <div id="main" class="main" style="padding-bottom: 100px;"></div>
    <!-------------底部定位---------------->
    <div class="overflow" style="width:100%; background:#282828; overflow:hidden; position:fixed; bottom:0;z-index:1;">
      <div id="goCalculate" style="z-index: 7;">
        <div class="payment-total-bar payment-total-bar-new mbtopbottom">
          <div class="shp-chk shp-chk-new">
            <span class="cart-checkbox ">
					<b class="checkboxFour" style="margin-top: 0px;">
                        <input type="checkbox" value="1" id="checkbox-1-1_selectAll" name="RadioGroup2"
                               class="checkbox-gx">
                        <label for="checkbox-1-1_selectAll"></label>
                    </b></span>
            <span class="cart-checkbox-text">全选</span>
          </div>
          <div class="shp-cart-info shp-cart-info-new">
            <strong class="shp-cart-total">合计:<span class="jinbi"><b><img src="../../images/jbtub.jpg"></b>
							<span id="totalCoin">0</span>
						</span>+
                    <span class="money" id="total">￥0</span></strong>
            <span class="sale-off sale-off-new  bottom-total-price">不包含运费</span>
          </div>
          <a href="javascript:void(0);" class="btn-right-block btn-right-block-new" id="goBanlance">去结算(<span
                    id="goodsCount">0</span>)</a>
        </div>
      </div>
      <div style="z-index: 100;">
        <ul class="foot" id="footer" style="display: none"></ul>
      </div>
    </div>

    <!----------------换购弹出框开始------------------->
    <style type="text/css">
      .pop_init { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); }
      .pop_show { animation: animation_bottow_show 1s; -ms-animation: animation_bottow_show 1s; -moz-animation: animation_bottow_show 1s; -webkit-animation: animation_bottow_show 1s; -o-animation: animation_bottow_show 1s; animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; }
      @keyframes animation_bottow_show {
          0% { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); }
          100% { transform: translateY(50%); -ms-transform: translateY(50%); -moz-transform: translateY(50%); -webkit-transform: translateY(50%); -o-transform: translateY(50%); }
      }  
      @-webkit-keyframes animation_bottow_show {
          0% { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); }
          100% { transform: translateY(50%); -ms-transform: translateY(50%); -moz-transform: translateY(50%); -webkit-transform: translateY(50%); -o-transform: translateY(50%); }
      }
      .pop_hide { animation: animation_bottom_hide 1s; -ms-animation: animation_bottom_hide 1s; -moz-animation: animation_bottom_hide 1s; -webkit-animation: animation_bottom_hide 1s; -o-animation: animation_bottom_hide 1s; animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; }
      @keyframes animation_bottom_hide {
          0% { transform: translateY(0%); -ms-transform: translateY(0%); -moz-transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); }
          100% { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); }
      }  
      @-webkit-keyframes animation_bottom_hide {
          0% { transform: translateY(0%); -ms-transform: translateY(0%); -moz-transform: translateY(0%); -webkit-transform: translateY(0%); -o-transform: translateY(0%); }
          100% { transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%); -o-transform: translateY(100%); }
      }  
      .delete_init { transform: translateX(100%); -ms-transform: translateX(100%); -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); }
      .delete_show {
        animation: delete_pop_show;
        -ms-animation: delete_pop_show;
        -moz-animation: delete_pop_show;
        -webkit-animation: delete_pop_show;
        -o-animation: delete_pop_show;
        animation-duration: 1s;
        -ms-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -o-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
      }
      @keyframes delete_pop_show {  
        %0{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
        %100{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
      }
      @-webkit-keyframes delete_pop_show {  
        %0{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
        %100{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
      }
      @-moz-keyframes delete_pop_show {  
        %0{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
        %100{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
      }
      @-ms-keyframes delete_pop_show {
        %0{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
        %100{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
      }
      @-o-keyframes delete_pop_show {
        %0{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
        %100{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
      }
      .delete_hide {
        animation: delete_pop_hide;
        -ms-animation: delete_pop_hide;
        -moz-animation: delete_pop_hide;
        -webkit-animation: delete_pop_hide;
        -o-animation: delete_pop_hide;
        animation-duration: 1s;
        -ms-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -webkit-animation-duration: 1s;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
      }
      @keyframes delete_pop_hide {
        %0{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
        %100{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
      }
      @-webkit-keyframes delete_pop_hide {  
        %0{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
        %100{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
      }
      @-moz-keyframes delete_pop_hide { 
        %0{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
        %100{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
      }
      @-ms-keyframes delete_pop_hide {
        %0{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
        %100{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
      }
      @-o-keyframes delete_pop_hide {
        %0{
          transform: translateX(0%);
          -ms-transform: translateX(0%);
          -webkit-transform: translateX(0%);
          -moz-transform: translateX(0%);
          -o-transform: translateX(0%);
        }
        %100{
          transform: translateX(100%);
          -ms-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          -moz-transform: translateX(100%);
          -o-transform: translateX(100%);
        }
      }
    </style>

    <!--<div class="denglu-chenggong pop_show" style="width:100%;z-index:9; border-radius: 0px;position: absolute;top:50%;">-->
    <div class="cpxqxzbg moveFromBottom" style="display:none;" id="givegoodspop">
      <p id="cancelgivegoods" class="ob-cha" id="btnclosechoose"><i class="iconfont icon-diancha"></i></p>
      <p id="active_title" style="padding-top:5px 5px;" class="qyxzbt">选择换购商品</p>
      <div id="active_item">
        <!--<div class="shp-cart-item-core shp-gwcny-give">
        <p class="shp-ms">满送</p>
        <a class="cart-product-cell-1" href="javascript:;">
        <img class="cart-photo-thumb" src="../../images/cpxdtu1.jpg">
        </a>
        <div class="cart-product-cell-2" style="width: 65%;">
        <div class="cart-product-name1 cart-product-name2"><a href="#"><span>玫瑰花嫩白精油手夏天针对男玫瑰花嫩白精油手夏天针对男玫瑰花嫩白精油手夏天针对男</span></a></div>
        <div style="text-align: left;margin-top: 5px;"><span>颜色分类：送手霜/红石榴礼盒</span><span style="float: right;">￥26</span></div>
        </div>
        </div>
        <div class="shp-cart-item-core shp-gwcny-give">
        <p class="shp-ms">满送</p>
        <a class="cart-product-cell-1" href="javascript:;">
        <img class="cart-photo-thumb" src="../../images/cpxdtu1.jpg">
        </a>
        <div class="cart-product-cell-2" style="width: 65%;">
        <div class="cart-product-name1 cart-product-name2"><a href="#"><span>玫瑰花嫩白精油手夏天针对男玫瑰花嫩白精油手夏天针对男玫瑰花嫩白精油手夏天针对男</span></a></div>
        <div style="text-align: left;margin-top: 5px;"><span>颜色分类：送手霜/红石榴礼盒</span><span style="float: right;">￥26</span></div>
        </div>
        </div>-->
      </div>
    </div>
    <div id="givegoodsback" class="dingwei" style="position:fixed;z-index:8;height: 100%;display: none;"></div>

    <!----------------换购弹出框结束----------------->
  </body>
  <script type="text/javascript" src="../../js/common/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="../../js/config.js"></script>
  <script type="text/javascript" src="../../js/common/common.js"></script>
  <script type="text/javascript" src="../../js/common/footer.js"></script>
  <script type="text/javascript" src="../../js/shopcart/shopFavourable.js"></script>
  <script type="text/javascript" src="../../js/shopcart/shoppingcart.js"></script>

</html>